<template>
  <div class="headerBox">
    <el-row>
      <el-col :span="16"
        ><i
          :class="flag ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          @click="fold"
        ></i
      ></el-col>
      <el-col :span="8">
        <div class="user">
          <span>
            <i class="el-icon-search"></i>
          </span>
          <span>
            <i class="el-icon-bell"></i>
          </span>
          <img src="../../assets/logo.jpg" alt="" />
          <span>{{ userInfo.username }}</span>

          <span class="exit iconfont icon-tuichu" @click="exit"> </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  mounted () {
    this.userInfo.username = this.getUsername
  },
  data () {
    return {
      userInfo: {
        username: '张三'
      }
    }
  },
  methods: {
    fold () {
      this.$emit('fold')
    },
    async exit () {
      const flag = await this.$confirm('是否推出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => { })
      if (!flag) return
      window.localStorage.clear()
      this.$router.replace({
        path: '/login'
      })
    }
  },
  props: {
    flag: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters(['getUsername'])
  }
}
</script>
<style scoepd lang="less">
.headerBox {
  height: 100%;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      align-items: center;
      display: flex;
    }
    .el-col-16 {
      font-size: 20px;
      i {
        cursor: pointer;
      }
    }
    .el-col-8 {
      justify-content: flex-end;
      align-items: center;
      padding-right: 50px;
      .user {
        height: 100%;
        display: flex;
        align-items: center;
        span {
          margin-right: 20px;
          cursor: pointer;
          display: flex;
          align-items: center;
        }
        > img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin: 0 5px;
          cursor: pointer;
        }
        .exit {
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
